<template>
  <div class="recommend-rank">
    <div class="recommend-rank-banner">
      <div class="recommend-rank-banner-icon"></div>
      <div class="recommend-rank-banner-update">更新时间: {{ createTime }}</div>
    </div>
    <div class="recommend-rank-load" v-if="!musicList.length">
      <van-button round plain type="primary" @click="getRankMusicList"
        >刷新一下</van-button
      >
    </div>
    <div class="recommend-rank-musiclist" v-else>
      <music-item
        v-for="(item, index) in musicList"
        :key="index"
        :musicIndex="index"
        :name="item.name"
        :artists="item.artists"
        :id="item.id"
      ></music-item>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs } from "vue";
import { MusicItem } from "@/components";
import { httpService } from "@/core/http";
import api from "@/api";
import dayjs from "dayjs";
import { Toast } from "vant";
export default defineComponent({
  name: "RecommendRank",
  components: {
    MusicItem,
  },
  setup() {
    const state = reactive({
      musicList: [],
      createTime: dayjs().format("YYYY-MM-DD"),
    });
    /** 获取排行榜 */
    const getRankMusicList = () => {
      httpService("GET", api.getPlayList, { id: "2250011882" }).then(
        (res: any) => {
          const { code, result, msg = "" } = res;
          if (code === 200 && result) {
            const { createTime, tracks } = result;
            state.createTime = dayjs(createTime).format("YYYY-MM-DD");
            state.musicList = tracks;
          } else {
            Toast.fail(msg);
          }
        }
      );
    };
    /** 时间格式化 */
    getRankMusicList();
    return {
      ...toRefs(state),
      getRankMusicList,
    };
  },
});
</script>

<style lang='scss' scoped>
.recommend-rank {
  height: 100%;
  overflow: auto;
  .recommend-rank-banner {
    height: 145px;
    @include systemBackColor();
    position: relative;
    .recommend-rank-banner-icon {
      position: absolute;
      top: 25px;
      left: 25px;
      width: 142px;
      height: 67px;
      background-position: -24px -30px;
      background-size: 166px 97px;
      background-image: url("//s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=");
      background-repeat: no-repeat;
    }
    .recommend-rank-banner-update {
      position: absolute;
      left: 25px;
      top: 100px;
      color: #fff;
      font-weight: 600;
      font-size: 14px;
    }
  }
  .recommend-rank-load {
    height: calc(100% - 145px);
    display: flex;
    justify-content: center;
    align-items: center;
    :deep() .van-button {
      @include systemBorderStyle(1px);
      @include systemFontColor();
    }
  }
}
</style>